<template>
  <div v-init-screen-h="16" class="tree_box">
    <div class="tab_box" />
    <el-input
      v-model="input1"
      style="margin-bottom: 10px"
      placeholder="请输入"
      suffix-icon="el-icon-search"
      size="small"
    />
    <div>
      <el-tree
        ref="tree"
        class="filter_ree"
        :data="treedata"
        :props="defaultProps"
        default-expand-all
        accordion
        :filter-node-method="filterNode"
        highlight-current
        node-key="id"
        @node-click="nodeClick"
      >
        <span slot-scope="{ data }" class="custom-tree-node">
          <span v-if="data.type == '1'">
            <span class="el-icon-folder-opened" />
            {{ data.name }}
          </span>
          <span v-if="data.type == '2'">
            {{ data.name }}
          </span>
          <span v-if="data.type == '3'">
            {{ data.name }}
          </span>
          <span v-if="data.type == '4'">
            {{ data.name }}
          </span>
          <span v-if="data.type == '5'" @click.stop="handleLive5(data)">
            <!-- {{ data.name }} -->
            <el-checkbox v-model="data.check" @change="changeCheck(data)">
              <span> {{ data.name }}</span></el-checkbox
            >
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>
<script>
import _ from "lodash";

const IterationDelateMenuChildren = arr => {
  if (arr.length) {
    for (const i in arr) {
      if (arr[i].children) {
        arr[i].children = arr[i].children.filter(item => item.label);
        IterationDelateMenuChildren(arr[i].children);
      } else {
        // delete arr[i].children;
      }
    }
  }
  return arr;
};

import { getCookie } from "@/utils/auth";
import { getDeviceTree } from "@/api/device";
import { getDevicesV2Tree } from "@/api/deviceOperation";
import axios from "axios";
export default {
  data() {
    return {
      treedata: [],
      showActive: "first",
      input1: "",
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  computed: {
    // 树列表查询事件
    filterNode() {
      return function(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      };
    }
  },
  mounted() {
    this.getTree();
  },
  methods: {
    setCheckId(arr, id) {
      arr.forEach(item => {
        if (item.type == 5 && item.id != id) {
          // item.check = false;
          this.$set(item, "check", false);
        }
        if (item.children) {
          this.setCheckId(item.children, id);
        }
      });
    },
    changeCheck(val) {
      this.setCheckId(this.treedata, val.id);
      // this.$forceUpdate();
      console.log("this.treedata :>> ", val, this.treedata);
      this.$emit("changeCheck", val);
    },
    nodeClick(val) {
      if (val.type == 5) {
        console.log("1235 :>> ", 1235);
        this.$emit("handleLive5", val);
      }
      // console.log("cal :>> ", val);
    },
    handleLive5(data) {
      // this.$emit("handleLive5", data);
    },
    // 获取树状列表
    getTree() {
      const that = this;
      // var params = {
      //   tenantToken: "demo",
      //   tenantAuthToken: "demo",
      // };
      var params = {
        // tenantToken: getCookie("tenant").token,
      };
      getDevicesV2Tree(params).then(res => {
        console.log(res);
        if (res.code == 1000) {
          // var treelist = JSON.parse(
          //   JSON.stringify(res.data.data).replace(/name/g, "label")
          // );
          // that.treedata = IterationDelateMenuChildren(treelist);
          this.treedata = res.data;
          console.log(that.treedata);
          this.$forceUpdate();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.tree_box {
  background-color: #fff;
  padding: 15px;
  height: 100%;
  overflow: hidden;

  .filter_ree::-webkit-scrollbar {
    width: 6px;
    height: 10px;
  }
  .filter_ree::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  .filter_ree::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
  .filter_ree::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }
  .filter_ree {
    overflow: auto;
    /* height: calc(100vh - 150px) !important; */
    height: 100%;
  }
  .tab_box {
    position: relative;
  }
  .close-icon {
    font-size: 12px;
    position: absolute;
    right: 10px;
    top: 16px;
  }
}
</style>
